<template>
    <div class="modules">
        <hr>
        <h1>modules的使用</h1>
        <ul>
            <!-- 1.使用store时，是需要state.moduleName.XXX的 -->
            <template v-for="item in $store.state.modules.bannersModule" :key="item.acm">
                <li>{{ item.title }}</li>
            </template>
        </ul>
        <hr>
        <h1>module命名空间</h1>
        <h2>counter.js模块的countter:{{ $store.state.counters.counter }}</h2>
        <!-- 2.使用getters时，是直接store.getters.XXX的 -->
        <!-- 加了命名空间 拿到getters里的是这样的写法 -->
        <h2>模块的doublecounter:{{ $store.getters["counters/doublecounter"] }}</h2>
        <button @click="increateCounter">counter模块+1</button>
    </div>
</template>
<script>

export default {

}
</script>
<script setup>
import { useStore } from "vuex"
const store = useStore()
store.dispatch("fetchHomeMultiondataActionawaitMudule")

// 给模块加上了命名空间
// 3.派发事件时以及提交mutation时，默认也是不需要跟模块名的
function increateCounter() {
    store.dispatch("counters/increateAction")
}
</script>
<style scoped lang="less"></style>